<style>
.elx-base-form {
    width: 500px;
    margin: 0px auto;
    margin-bottom: 50px;
}
.elx-base-form .el-collapse {
    border: 0px;
}
.elx-base-form .el-collapse-item__header {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    border-bottom: 1px solid #eaeaea;
    background: #EFF2F7;
    font-weight: 600;
    padding-left: 0px;
}
.elx-base-form .el-collapse-item__wrap {
    background-color: transparent;
    border-bottom: 0px;
}
.elx-base-form .el-collapse-item__content {
    padding: 10px 0px;
}
.elx-base-form .el-collapse-item.is-active>.el-collapse-item__header .el-collapse-item__header__arrow {
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    display: inline-block;
}
.elx-base-form .el-collapse-item>.el-collapse-item__header .el-collapse-item__header__arrow.el-icon-arrow-right {
    display: none;
}
.elx-base-form .el-collapse-item>.el-collapse-item__header .el-collapse-item__header__arrow.uex-icon-caret-right {
    float: right;
    line-height: 30px;
}
.elx-base-form .el-collapse-item__header span.title {
    width: 60px;
    display: inline-block;
    text-align: right;
}
.elx-base-form .elx-radio {
    border: 1px solid #bfcbd9;
}
.elx-base-form .el-slider__runway.show-input {
    margin-right: 80px;
}
.elx-base-form .el-input-number--small {
    width: 50px;
}

.elx-base-form .el-input-number .el-input__inner {
    text-align: center;
}
.elx-base-form .el-input-number {
    width: 116px;
}
.elx-base-form .el-input-number__decrease, .elx-base-form .el-input-number__increase {
    line-height: 28px;
}
</style>
<script type="text/x-template" id="base-form-template">
    <div class="elx-base-form">
        <el-form ref="baseForm" :model="unit" :rules="ruleFormRules" label-width="80px" label-suffix=" :">
            <el-form-item label="ID" prop="id">
                <el-input v-model="unit.id" disabled></el-input>
            </el-form-item>            
            <el-form-item prop="unitCode" label="ETL单元">
                <el-input v-model="unit.unitCode"></el-input>
            </el-form-item>
            <el-form-item prop="label" label="ETL名称">
                <el-input v-model="unit.label"></el-input>
            </el-form-item>
<#--            <el-form-item label="模板">
                <el-select v-model="unit.template" placeholder="请选择模板">
                    <el-option v-for="item in templateOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>-->
            <el-form-item label="类型">
                <el-radio-group v-model="unit.unitType">
                    <el-radio v-for="item in unitTypeOptions" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="批次周期">
                <elx-radio-group v-model="unit.batchType">
                    <elx-radio :key="option.value" v-for="option in batchTypeOptions" :label="option.value">{{option.label}}</elx-radio>
                </elx-radio-group>
            </el-form-item>
            <el-form-item label="批次偏移">
                <el-input-number v-model="unit.batchOffset" :min="batchFormat[unit.batchType].range.min" :max="batchFormat[unit.batchType].range.max"></el-input-number>
            </el-form-item>
            <el-form-item label="批次号" prop="batchNo">
                <el-input placeholder="请输入内容" v-model="unit.batchNo"></el-input>
            </el-form-item>
            <el-form-item label="批次步进">
                <el-input-number v-model="unit.batchStep" :min="batchFormat[unit.batchType].range.min" :max="batchFormat[unit.batchType].range.max"></el-input-number>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" :rows="2" v-model="unit.descr"></el-input>
            </el-form-item>
        </el-form>
        <!--<el-collapse v-model="activeName" accordion>
            <el-collapse-item name="1">
                <template slot="title">
                    <span class="title">高级</span>
                    <i class="el-collapse-item__header__arrow uex-icon-caret-right"></i>
                </template>
            </el-collapse-item>
        </el-collapse>-->
    </div>
</script>

<script>
    var validCodeExist = function(rule, value, callback)  {
        if (store.state.oper == 'edit' && store.state.unit.unitCode == store.state.originCode) {
            callback();
        } else {
            axios.get(_contextPath + '/open/datastash/unit/code/' + value)
            .then(function (response) {
                if(response.data){
                    return callback(new Error('ETL单元已存在'));
                }else{
                    callback();
                }
            })
            .catch(function (error) {
                return callback(new Error('校验出错'));
            });
        }
    };
    
    Vue.component('base-form', {
        template: '#base-form-template',
        store: store,
        data:function(){
            return{
            	templateOptions: [
            	    {label: 'a', value: 'aa'}, 
            	    {label: 'b', value: 'bb'}
            	],
            	unitTypeOptions: [
            	    {label: '采集', value: '1'}, 
            	    {label: '分发', value: '2'}, 
            	    {label: '流', value: '3'}
            	],
            	batchTypeOptions: [
                    {label: '月', value: 'monthly'},
            	    {label: '日', value: 'daily'},
            	    {label: '时', value: 'hourly'},
            	    {label: '分', value: 'minutely'}
            	],
            	batchFormat: {
            		monthly: {momentType: 'months', format: 'YYYYMM', range: {min: -12, max: 12}, default: {offset: 0, step: 1}},
            		daily: {momentType: 'days',format: 'YYYYMMDD', range: {min: -31, max: 31}, default: {offset: 0, step: 1}},
            		hourly: {momentType: 'hours',format: 'YYYYMMDDHH', range: {min: -24, max: 24}, default: {offset: 0, step: 1}},
            		minutely: {momentType: 'minutes',format: 'YYYYMMDDHHmm', range: {min: -60, max: 60}, default: {offset: 0, step: 30}}
            	},
            	ruleFormRules: {
            		id: [{ required: true, message: '请输入ID'}],
                    unitCode: [
                        { required: true, message: '请输入ETL单元'},
                        { validator: validCodeExist, trigger: 'blur' }
                    ],
                    batchNo: [{ required: true, message: '请输入批次号'}],
                    label: [{ required: true, message: '请输入ETL名称'}],
            	},
            	batchStepRange: {
            		min: -10,
            		max: 10
            	},
            	activeName: '0',
            	isInit: true
            }
        },
        computed: {
        	unit: function() {
        		return this.$store.state.unit;
        	},
        	oper: function() {
        		return this.$store.state.oper;
        	}
        },
        methods: {
        	formatBatchNo: function() {
        		var type = this.unit.batchType;
        		var momentType = this.batchFormat[type].momentType;
        		var offset = Number(this.unit.batchOffset);
        		if (offset > 0) {
        			this.unit.batchNo = moment().add(momentType, offset).format(this.batchFormat[type].format);
        		} else {
        			this.unit.batchNo = moment().subtract(momentType, -offset).format(this.batchFormat[type].format);
        		}
        		this.$store.commit('editUnit', this.unit);
        	}
        },
        watch: {
        	'unit.batchOffset': function() {
        		this.formatBatchNo();
        	},
        	'unit.batchType': function() {
        		if (this.isInit && this.oper == 'edit') {
        			this.isInit = false;
        			return;
        		}
        		var type = this.unit.batchType;
        		var momentType = this.batchFormat[type];
        		this.unit.batchOffset =  this.batchFormat[type].default['offset'];
        		this.unit.batchStep =  this.batchFormat[type].default['step'];
        		this.formatBatchNo();
        	}
        },
        mounted: function () {
            
        },
        created: function () {
        	
        }
    })
</script>